<!DOCTYPE html>
<html lang="en">
<head>
    <title>函数式接口</title>
    <th:block th:include="client/include :: common-css" />
    <th:block th:include="client/include :: common-js" />
</head>

<body  gtools_scp_screen_capture_injected="true" class="bg-">
<!--[if lt IE 8]>
<div class="browsehappy" role="dialog">
    当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>。
</div>
<![endif]-->
<header id="header" class="header bg-white">
    <div class="navbar-container">
        <a href="/static" class="navbar-logo">CrazyStone个人博客小站</a>
        <div class="navbar-menu">
            <form name="logoutform" action="/logout" method="post"><input type="hidden" name="_csrf" value="feef4547-7e08-4454-b4e3-521a01073113"/></form>
            <a class="header-info" href="/login" >登录</a>
            
            <!--<a style="color: #fff" >订阅</a>-->
            <a  class="header-info" href="/admin">后台管理</a>
        </div>
        <div class="navbar-search" onclick="">
            <span class="icon-search"></span>
            <form role="search" onsubmit="return false;">
                <span class="search-box">
                    <input type="text" id="search-inp" class="input" placeholder="搜索..." maxlength="30"
                           autocomplete="off"/>
                </span>
            </form>
        </div>
    </div>
</header>


<article class="main-content post-page">
    <div class="post-header">
        <h1 class="post-title" itemprop="name headline" th:text="${article.title}">函数式接口</h1>
        <div class="post-data">
            <time datetime="2018-12-01" itemprop="datePublished"  >发布于 [[${article.created}]]</time>
        </div>
    </div>
    <br />
    <div id="post-content" class="post-content content" th:utext="${@textUtils.md2Html(article.content)}"></div>
</article>


<div>


    <div id="8" class="comment-container">
        <div id="comments" class="clearfix">
            <div>
                <span th:if="${@loginUtils.isLogin()}" class="response">
     Hello，<a data-no-instant="" th:text="${@loginUtils.getLoginUser().username}">admin</a>
     如果你想 <a href="/logout">注销</a> ?
                </span>
                <span th:unless="${@loginUtils.isLogin()}" class="response">
        用户想要评论，请先<a href="/login" title="登录" target="_blank" data-no-instant="">登录</a>!
                </span>


                <div>
                    <div>
                        <form id="comment-form" class="comment-form" role="form"  >
                            <input type="hidden" name="articleId" id="aid" th:value="${article.id}">
                            <textarea name="content" id="textarea" class="form-control" placeholder="以上信息可以为空,评论不能为空哦!" required="required" minlength="5" maxlength="2000"></textarea>
                            <button type="button" class="submit" id="misubmit">提交</button>
                        </form>
                    </div>


                </div>
            </div>
            <!-- 分页显示其他评论内容 -->
            <div>
                <ol class="comment-list">
                    
                        <li id="li-comment-15" class="comment-body comment-parent comment-odd">
                            <div id="comment-15">
                                <div class="comment-view" onclick="">
                                    <div class="comment-header">
                                        <!--设置人物头像和名称-->
                                        <img class="avatar" src="./assets/img/avatars.jpg" height="50">
                                        <a class="comment-author" rel="external nofollow">admin</a>
                                    </div>
                                    <!-- 评论内容 -->
                                    <div class="comment-content">
                                        <span class="comment-author-at"></span>
                                        <p></p><p>151235</p>
<p></p>
                                    </div>
                                    <!-- 评论日期 -->
                                    <div class="comment-meta">
                                        <time class="comment-time">2024-04-10</time>
                                        
                                    </div>
                                </div>
                            </div>
                        </li>
                    
                        <li id="li-comment-14" class="comment-body comment-parent comment-odd">
                            <div id="comment-14">
                                <div class="comment-view" onclick="">
                                    <div class="comment-header">
                                        <!--设置人物头像和名称-->
                                        <img class="avatar" src="./assets/img/avatars.jpg" height="50">
                                        <a class="comment-author" rel="external nofollow">tom</a>
                                    </div>
                                    <!-- 评论内容 -->
                                    <div class="comment-content">
                                        <span class="comment-author-at"></span>
                                        <p></p><p>very good blog</p>
<p></p>
                                    </div>
                                    <!-- 评论日期 -->
                                    <div class="comment-meta">
                                        <time class="comment-time">2018-12-13</time>
                                        <a href="javascript:void(0)" style="color: #1b961b">
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回复
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    
                </ol>
                <!-- 进行评论分页 -->
                <div class="lists-navigator clearfix">
                    <ol class="page-navigator">
                        <!-- 判断并展示上一页 -->
                        
                        <!-- 判断并展示中间页 -->
                        
                            
                                <li class="current">
                                    <a href="?cp=1#comments">1</a>
                                </li>
                            
                            
                        
                        <!-- 判断并展示下一页 -->
                        
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
			
        </div>
    </div>
</div>


<script type="text/javascript">
    function loadComment(pageNum){
        $.ajax({
            type: 'get',
            url: '/comment/list',
            data: {articleId:$("#aid").val(),pageNum:pageNum},
            async: true,
            dataType: 'json',
            success: function (result) {
                console.log(result)
                let templates = '';
                $.each(result.list,function (i,o){
                    // 渲染模板
                    templates += '<li id="li-comment-15" class="comment-body comment-parent comment-odd">\n' +
                        '                                <div id="comment-15">\n' +
                        '                                    <div class="comment-view" οnclick="">\n' +
                        '                                        <div class="comment-header">\n' +
                        '                                            <!--设置人物头像和名称-->\n' +
                        '                                            <img class="avatar" src="/assets/img/avatars.jpg" height="50">\n' +
                        '                                            <a class="comment-author" rel="external nofollow">'+o.author+'</a>\n' +
                        '                                        </div>\n' +
                        '                                        <!-- 评论内容 -->\n' +
                        '                                        <div class="comment-content">\n' +
                        '                                            <span class="comment-author-at"></span>\n' +
                        '                                            <p></p><p>'+o.content+'</p>\n' +
                        '    <p></p>\n' +
                        '                                        </div>\n' +
                        '                                        <!-- 评论日期 -->\n' +
                        '                                        <div class="comment-meta">\n' +
                        '                                            <time class="comment-time">'+o.created+'</time>\n' +
                        '\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                            </li>';
                })
                $(".comment-list").html(templates);

                let pageText = '';
                $.each(result.navigatepageNums,function (i,o){
                    pageText +=
                        '<li class="'+(o==result.pageNum?'current':'')+'">' +
                        '<a>'+o+'</a>' +
                        '</li>';
                });
                $(".page-navigator").html(pageText);
                $(".page-navigator a").click(function (){
                    let pageNum = $(this).text();
                    loadComment(parseInt(pageNum));
                });
            }
        });
    }
    loadComment(1);
    $("#misubmit").click(function (){

        $.ajax({
            type: 'post',
            url: '/comment/add',
            data: {articleId:$("#aid").val(),content:$("#textarea").val()},
            async: false,
            dataType: 'json',
            success: function (result) {
                if(result.code == 0){
                    alert("评论成功");
                    window.location.reload();
                }else{
                    alert(result.msg)
                }
            }
        });
    });

</script>



<footer class="footer bg-white">
    <div class="footer-social">
        <div class="footer-container clearfix">
            <div class="social-list">
            </div>
        </div>
    </div>
    <div class="footer-meta">
        <div class="footer-container">
            <div class="meta-item meta-copyright">
                <div class="meta-copyright-info">
                    <div class="info-text">
                        <a style="display: block;margin: 0 auto;" class="info-logo">
                            <img style="display: block;margin: 0 auto;" src="./user/img/bloglogo.jpg"/>
                        </a>
                        <p style="margin: 30px"><time class="comment-time">2024</time> &copy; Powered By <a style="color: #0e90d2" rel="nofollow">CrazyStone</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<script src="./user/js/headroom.min.js"></script>
<script src="./user/js/highlight.min.js"></script>
<script src="./user/js/instantclick.min.js"></script>

<!-- 使用layer.js实现图片缩放功能 -->
<script type="text/JavaScript">
    $('.post-content img').on('click', function(){
        var imgurl=$(this).attr('src');
        var w=this.width*2;
        var h=this.height*2+50;
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            area: [w+"px", h+"px"],
            shadeClose: true, //点击遮罩关闭
            content: '\<\div style="padding:20px;">' +
                    '\<\img style="width:'+(w-50)+'px;" src='+imgurl+'\>\<\/div>'
        });
    });
</script>
</body>
</html>